<template>
  <v-container id="find-password" fill-height tag="section">
    <v-row justify="center">
      <v-slide-y-transition appear>
        <base-material-card
          color="success"
          light
          max-width="100%"
          width="350px"
          class="px-5 py-3"
        >
          <template v-slot:heading>
            <div class="text-center">
              <h1 class="display-2 font-weight-bold mb-2">找回密码</h1>
            </div>
          </template>

          <v-card-text class="text-center">
            <v-form ref="form">
              <v-text-field
                color="secondary"
                label="邮箱..."
                prepend-icon="mdi-email"
                class="mt-10"
                v-model="FormData.email"
                :rules="[(v) => !!v || '该项为必填项！']"
              />

              <pages-btn
                large
                color=""
                depressed
                class="v-btn--text success--text"
                :loading="loading"
                :disabled="loading"
                @click="submit"
              >
                找回密码
              </pages-btn>
            </v-form>
          </v-card-text>
        </base-material-card>
      </v-slide-y-transition>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "FindPassword",
  components: {
    PagesBtn: () => import("./components/Btn"),
  },
  data: () => ({
    loading: false,
    FormData: {
      email: "",
    },
  }),
  methods: {
    submit() {
      if (this.$refs.form.validate()) {
        this.loading = true;
      }
    },
  },
};
</script>
